<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">司南排名图</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pd-main">
            <div id="chart1" class="chart-1">
              <div class="compass">
                <div class="compass-bg-1"></div>
                <div class="compass-bg-2"></div>
                <div class="compass-bg-3"></div>
                <div class="compass-bg-4"></div>
                <div class="compass-bg-5"></div>
                <div class="compass-bg-6"></div>
                <div class="compass-bg-7"></div>

                <div class="compass-bg-c-1"></div>
                <div class="compass-bg-c-2"></div>
                <div class="compass-bg-c-3"></div>
                <div class="compass-bg-c-4"></div>

                <div
                  class="compass-text"
                  :class="[
                    `compass-text-${index + 1}`,
                    { show: number == index },
                  ]"
                  v-for="(item, index) in arr"
                  :key="index"
                >
                  <span>事项数：{{ item.itemNum }}</span>
                  <span>数据项：{{ item.dataItem }}</span>
                  <span>数据量：{{ item.dataSize }}</span>
                </div>

                <div class="compass-number">
                  <div
                    :title="`${index + 1}`"
                    :class="[`rank-${index + 1}`, { szscale: number == index }]"
                    v-for="(item, index) in arr"
                    :key="index"
                  >
                    <span>{{ item.workUnit }}</span>
                  </div>
                </div>

                <div class="line-sx">
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                  <div class="line-fs"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Sinan',
  data() {
    return {
      timer: null,
      number: null,
      arr: [
        {
          id: 1,
          itemNum: 258,
          dataItem: 1288,
          dataSize: 12306,
          workUnit: 'JS',
        },
        {
          id: 2,
          itemNum: 568,
          dataItem: 5623,
          dataSize: 12306,
          workUnit: 'Nodejs',
        },
        {
          id: 3,
          itemNum: 208,
          dataItem: 1755,
          dataSize: 12043,
          workUnit: 'Vuejs',
        },
        {
          id: 4,
          itemNum: 358,
          dataItem: 1812,
          dataSize: 12306,
          workUnit: 'CSS3',
        },
        {
          id: 5,
          itemNum: 128,
          dataItem: 4718,
          dataSize: 12580,
          workUnit: 'jQuery',
        },
      ],
    }
  },
  methods: {
    initData() {
      // this.number = this.number === this.arr.length ? 0 : this.number
      this.number = this.number == this.arr.length ? 0 : this.number
      this.timer = setTimeout(() => {
        this.number++
        this.initData()
      }, 5000)
    },
  },
  mounted() {
    setTimeout(() => {
      this.number = 0
      this.initData()
    }, 4000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>
<style lang="scss" scoped>
@import './index';
</style>
